<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
  <title>Welcome</title>
  <style type="text/css">
    .ReadMsgBody {
      width: 100%;
      background-color: #ffffff;
    }

    .ExternalClass {
      width: 100%;
      background-color: #ffffff;
    }

    html {
      width: 100%;
    }

    body {
      -webkit-text-size-adjust: none;
      -ms-text-size-adjust: none;
      margin: 0;
      padding: 0;
    }

    table {
      border-spacing: 0;
      border-collapse: collapse;
    }

    img {
      display: block !important;
    }

    table td {
      border-collapse: collapse;
    }

    .top-margin {
      height: 50px;
    }

    .main-header {
      padding: 50px 100px;
      background: rgba(0, 0, 0, 0.5);
      font-weight: 300;
    }

    .footer {
      margin-top: 20px;
    }

    /* ----------- media queries (responsive) ----------- */

    @media only screen and (max-width: 640px) {
      body .show {
        display: block !important;
      }

      body .hide {
        display: none !important;
      }

      body .container590 {
        width: 440px !important;
      }
    }

    @media only screen and (max-width: 480px) {
      body .show {
        display: block !important;
      }

      body .hide {
        display: none !important;
      }

      body .container590 {
        width: 280px !important;
      }
    }

  </style>
</head>

<body>

<div class="top-margin"></div>

<table border="0" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" bgcolor="323232"
        style="background-image: url('https://truenorthtechnology.com/download/life3.jpg?path=&disposition=inline'); background-size: cover; background-position: top center; background-repeat: repeat;">

      <table border="0" align="center" cellpadding="0" cellspacing="0" class="container590">

        <tr>
          <td height="25" style="font-size: 25px; line-height: 25px;">&nbsp;</td>
        </tr>


        <tr>
          <td height="30" style="font-size: 30px; line-height: 30px;">&nbsp;</td>
        </tr>
        <tr>
          <td height="50" style="font-size: 50px; line-height: 50px;">&nbsp;</td>
        </tr>

        <tr>
          <td class="main-header" align="center" height="42"
              style="color: #ffffff; font-size: 32px; font-family: 'Open Sans', Calibri, sans-serif; mso-line-height-rule: exactly; line-height: 40px;">

            <!-- ============ title header ============ -->

            <div style="line-height: 34px;">
                <span>
                    <multiline>
                      <strong>Welcome <%= @user.username %></strong> <br><br>
                      An account has been created for you!
                    </multiline>
                </span>
            </div>
          </td>
        </tr>

        <tr>
          <td height="10" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
        </tr>


        <tr>
          <td height="50" style="font-size: 50px; line-height: 50px;">&nbsp;</td>
        </tr>

        <tr>
          <td align="center">

            <table class="cta-button" border="0" align="center" width="163" cellpadding="0" cellspacing="0"
                   style="border: none">
              <tr>
                <td height="10" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
              </tr>

              <tr>
                <td>
                  <table border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center"
                          style="color: #ffffff; font-size: 13px; font-family: 'Open Sans', Calibri, sans-serif; font-weight: 600; line-height: 24px;">
                        <!-- ============ headline button ============ -->
                      </td>

                      <td width="14" align="right" valign="middle">

                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

              <tr>
                <td height="10" style="font-size: 10px; line-height: 10px;">&nbsp;</td>
              </tr>

            </table>
          </td>
        </tr>

        <tr>
          <td height="115" style="font-size: 115px; line-height: 115px;">&nbsp;</td>
        </tr>

      </table>
    </td>
  </tr>

</table>


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td height="50">&nbsp;</td>
  </tr>

  <tr>
    <td>
      <table class="container590" border="0" align="center" width="590" cellpadding="0" cellspacing="0">
        <tr>
          <td>
            <p class="instructions" style="text-align: center; color: #555; font-size: 24px; font-family: 'Open Sans', Calibri, sans-serif; mso-line-height-rule: exactly; line-height: 42px;">To
              Activate your new account, please follow this link:</p>

            <p style="text-align: center">

            <table border="0" align="center" width="124" cellpadding="0" cellspacing="0"
                   bgcolor="5ab600" style="border-radius: 3px;">
              <tr>
                <td height="6" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
              </tr>

              <tr>
                <td>
                  <table border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                      <td align="center"
                          style="color: #ffffff; font-size: 13px; font-family: Open Sans, Calibri, sans-serif; font-weight: 700;">

                        <div style="line-height: 24px;">
                        <span>
                        <a href="<%= @url %>"
                           style="color: #ffffff; text-decoration: none;">
                          <singleline>Confirm</singleline>
                        </a>
                        </span>
                        </div>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>

              <tr>
                <td height="6" style="font-size: 6px; line-height: 6px;">&nbsp;</td>
              </tr>

            </table>

            <p style="text-align: center; color: #555; font-size: 12px; font-family: 'Open Sans', Calibri, sans-serif; mso-line-height-rule: exactly; line-height: 42px;"><%= @url %></p>


            <p style="text-align: center; color: #555; font-size: 12px; font-family: 'Open Sans', Calibri, sans-serif; mso-line-height-rule: exactly; line-height: 42px;">Your
              username is: <strong><%= @user.username %></strong>
              <% if @temp_password %>
                Your password is: <strong><%= @temp_password %>
              <% else %>
                , your password is what was used during registration.
              <% end %>
              </strong></p>

          </td>
        </tr>
      </table>

    </td>
  </tr>

  <tr>
    <td height="100" style="font-size: 100px; line-height: 100px;">&nbsp;</td>
  </tr>

</table>


<table class="footer" border="0" width="100%" cellpadding="0" cellspacing="0" bgcolor="2d2d2d">

  <tr>
    <td height="20" style="font-size: 20px; line-height: 20px;">&nbsp;</td>
  </tr>

  <tr>
    <td align="center">

      <table border="0" align="center" width="590" class="container590" cellpadding="0" cellspacing="0">

        <tr>
          <td align="center">

            <table border="0" class="container590" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td align="center"
                    style="color: #717171; font-size: 14px; font-family: 'Open Sans', Calibri, sans-serif; line-height: 25px;">
                  <div style=" line-height: 25px;">
                              <span>
                              <multiline>
                                © <%= Time.now.year %> Copyright. All Rights Reserved.
                              </multiline>
                              </span>
                  </div>
                </td>
              </tr>

            </table>

          </td>
        </tr>

      </table>
    </td>
  </tr>

  <tr>
    <td height="20" style="font-size: 20px; line-height: 20px;">&nbsp;</td>
  </tr>

</table>

</body>
</html>